<template>
  <div class="messageComponent">
    <!-- 无内容 -->
    <section v-show="!datas.imageList || !datas.imageList[0]" class="defaultcommodity">
      <div v-for="index in 4" :key="index" class="defaultcommodityList">
        <div class="meassagepic">
          <img draggable="false" src="../../../assets/images/imgs.png" alt="" />
        </div>
        <div class="messagetext">
          <p>消息类型标题</p>
          <span>这里是消息类型的描述信息</span>
        </div>
      </div>
    </section>
    <!-- 有内容 -->
    <section v-show="datas.imageList && datas.imageList[0]" class="defaultcommodity">
        <div v-for="(item, index) in datas.imageList" :key="index" class="defaultcommodityList">
            <div class="meassagepic">
                <img v-if="!item.src" src="../../../assets/images/imgs.png" />
                <img v-else draggable="false" :src="item.src" alt="" />
            </div>
            <div class="messagetext">
                <p>{{ item.text }}</p>
                <span>{{ item.desc }}</span>
            </div>
        </div>
    </section>
    <!-- 组件操作 -->
    <slot name="deles" />
  </div>
</template>
<script>
export default {
  name: "MessageComponent",
  props: {
    datas: Object,
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.messageComponent {
  background: #ffffff;
  padding:10px 0 0 10px;
  position: relative;
  .defaultcommodityList {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .meassagepic {
      width: 50px;
      height: 50px;
      margin-right: 15px;
      img {
        width: 100%;
        height:100%;
        border-radius: 50%;
      }
    }
    .messagetext {
      p {
        font-size: 16px;
        line-height: 0;
        font-weight: 600;
      }
      span {
        color: #666666;
        font-size: 12px;
      }
    }
  }
}
</style>
